<template>
	<view class="content">
		<!--顶部导航-->
		<view class="content_1" :style="{'height':titleBarHeight + 'px'}">
			<view class="title_1" :style="{'margin-top':top + 'px'}">
				<view class="title_1_icon" @click="back">
					<image class="title_1_icon" src="../../../static/mine/finish/back.png" mode="aspectFit"></image>
				</view>
				<view class="title_1_text">确认订单</view>
			</view>
		</view>
		<!--占位-->
		<view :style="{height:spaceHeight +'px'}"></view>
		<!--顶部梯形-->
		<view class="content_2">
			<view class="choose_box">
				<!--预定自提选中-->
				<view class="self_left" v-if="selfstate == 'true'">
					<view class="self_left_text">店内就餐</view>
				</view>
				<view class="self_right" v-if="selfstate == 'true'" @click="changeTake">
					<view class="self_right_text">外卖到家</view>
				</view>
				<!--外卖到家选中-->
				<view class="home_left" v-if="homestate == 'true'" @click="changeTake">
					<view class="home_left_text">店内就餐</view>
				</view>
				<view class="home_right" v-if="homestate == 'true'">
					<view class="home_right_text">外卖到家</view>
				</view>
				<!--选中详细-->
				<view :class="[selfstate == 'true' ? 'choose_self_detail' : '',
							   homestate == 'true' ? 'choose_home_detail' : '']">
				</view>
			</view>
		</view>
		<!--选中详细内容-->
		<view class="content_3">
			<!--选中预约自提内容-->
			<view class="self_detail_view" v-if="selfstate == 'true'">
				<view class="shop">
					<view class="shopname">{{shopname}}</view>
					<view class="call" @click="callPhone">
						<image class="call" src="../../../static/order/confirm/call.png"></image>
					</view>
				</view>
				<view class="shopaddress">{{shopaddress}}</view>
				<view class="takertime">
					<view class="time">自取时间</view>
					<view class="choosetime">
						<view class="timestate">立即</view>
						<image class="timeicon" src="../../../static/mine/right.png"></image>
					</view>
				</view>
				<view class="takerphone">
					<view class="phone">预留电话</view>
					<view class="choosephone">
						<input class="phonestate" placeholder="请输入电话" maxlength="11" :value="shopphone" type="number"></input>
						<image class="phoneicon" src="../../../static/order/confirm/phone.png"></image>
					</view>
				</view>
			</view>
			<!--外卖到家选中内容-->
			<view class="home_detail_view" v-if="homestate == 'true'">
				<view @click="chooseAdd">
					<view class="useraddress">
						<view class="address">{{useraddress}}</view>
						<image class="chooseicon" src="../../../static/mine/right.png"></image>
					</view>
					<view class="userinfo">
						<view class="username">{{username}}</view>
						<view class="userphone">{{phone}}</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="arrivetime" @click="showMask">
					<view class="arrive">送货时间</view>
					<view class="choosetime">
						<view class="timestate">{{arriveTime}}</view>
						<image class="timeicon" src="../../../static/mine/right.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!--订单详细-->
		<view class="content_4">
			<view class="ordertitle">{{shopname}}</view>
			<view class="line" style="margin-bottom: 30upx;"></view>
			<block v-for="(orderitem, index_orderitem) in orderitemList" :key='index_orderitem'>
				<view class="orderdetail">
					<image class="orderimg" :src="orderitem.cover_image" mode="aspectFit"></image>
					<view class="detail">
						<view class="shopdetail">
							<view class="detailname">
								<view class="counticon">折</view>
								<view class="name">{{orderitem.goods_name}}</view>
							</view>
							<view class="detailprice">
								<view class="oldprice">￥{{orderitem.sell_price}}</view>
								<view class="newprice">￥{{orderitem.origin_price}}</view>
							</view>
						</view>
						<view class="shopnum">x{{orderitem.goods_amount}}</view>
					</view>
				</view>
			</block>
			<view style="height: 5upx;"></view>
			<view class="line" style="margin-bottom: 30upx;"></view>
			<view class="packageview">
				<view class="packname">时段特价</view>
				<view class="packageprice">￥{{box_cost}}</view>
			</view>
			<view class="sentview">
				<view class="sentname">会员特价</view>
				<view class="sentprice">￥{{send_cost}}</view>
			</view>
			<view class="sentview">
				<view class="sentname">整单满减</view>
				<view class="sentprice">￥{{send_cost}}</view>
			</view>
			<view class="line" style="margin-bottom: 35upx;"></view>
			<view class="couponview" v-if="false">
				<view class="coupontextview">
					<view class="couponicon">券</view>
					<view class="coupontext">优惠券优惠</view>
					<view class="couponprice">￥3</view>
				</view>
				<view :class="[couponuse == '0' ? 'couponbtn' : 'couponbtn_active']" @click="changeCouponuse"></view>
			</view>
		</view>
		<!--团购代拿-->
		<view class="content_5" v-if="homestate == 'true'">
			<view class="tips_view" @click="Tuangou">
				<view class="tip" style="color: #000000;">团购代拿</view>
				<image v-if="tuangou == '0'" class="tip_icon" src="../../../static/order/confirm/choose_0.png"></image>
				<image v-if="tuangou == '1'" class="tip_icon" src="../../../static/order/confirm/choose_1.png"></image>
			</view>
			<view class="tips_view">
				<view class="tip">微信名</view>
				<input class="tipinput" style="text-align: right;" placeholder="请填写微信名"></input>
			</view>
			<view class="tips_view">
				<view class="tip">手机号</view>
				<input class="tipinput" style="text-align: right;" placeholder="请填写手机号"></input>
			</view>
		</view>
		<!--备注-->
		<view class="content_5">
			<view class="tip" style="color: #000000;">备注</view>
			<input class="tipinput" placeholder="输入备注要求" @blur="completeInput"></input>
			<!-- <view class="tips_view">
				<view class="tip">代拿物品信息</view>
				<view class="tipinput_view">
					<textarea class="tipinput_area" placeholder="请输入取件码"></textarea>
					<image class="tipicon" src="../../../static/mine/right.png"></image>
				</view>
			</view> -->
			<!-- <view class="tips_view">
				<view class="tip">B类取件信息</view>
				<view class="tipinput_view">
					<view class="tipinput">请输入取件码</view>
					<view class="tipicon"></view>
				</view>
			</view> -->
			<!-- <view class="showmoreicon"></view> -->
		</view>
		<!--底部去支付-->
		<view class="content_6">
			<view class="totalprice_view">
				<view class="paytext">应付</view>
				<view style="font-size: 28upx; color: #D1121A;">￥</view>
				<view class="totalprice">{{total_price}}</view>
			</view>
			<view class="countprice">（已优惠￥{{discount_money}}）</view>
			<view class="topaybtn" @click="toPay">去支付</view>
		</view>
		<!--选择自取时间-->
		<hTimeAlert title="选择到达时间" subhead="紫菜小店" rangeStartTime="8:00:00" rangeEndTime="22:00:00" intervalTime="30" dayStartIntTime="0"
		 rangeDay="5" :isShow="isShow" :maskHide="maskHide" :rangeType="rangeType" :closeBtn="closeBtn" @closeAlert="handelClose"></hTimeAlert>
	</view>
</template>

<script>
	//引入时间选择组件
	//参考https://ext.dcloud.net.cn/plugin?id=1530
	import hTimeAlert from "@/components/h-time-alert/h-time-alert.vue";

	//引入request.js
	import {
		Request
	} from '../../../utils/request.js'
	var app = getApp()

	export default {
		components: {
			hTimeAlert
		},
		data() {
			return {
				//到达时间
				arriveTime: '大约30送达',
				//时间选择显示
				isShow: false,
				//右上角关闭按钮
				closeBtn: true,
				//显示时间点
				rangeType: false,

				titleBarHeight: '',
				spaceHeight: '',
				top: '',
				/*预定自提选中状态*/
				selfstate: 'true',
				/*外卖到家选中状态*/
				homestate: 'false',
				/*团购代拿选中状态*/
				tuangou: '0',
				couponuse: '0',
				//订单列表
				orderitemList: [],
				//订单id
				order_id: '',
				//订单总价
				total_price: '',
				//打包费
				box_cost: '',
				//配送费
				send_cost: '',
				//已优惠价格
				discount_money: '',
				//店铺名
				shopname: '',
				//店铺地址
				shopaddress: '',
				//店铺电话
				shopphone: '',
				//用户名称
				username: '请填写姓名',
				//用户地址
				useraddress: '请填写地址',
				//用户联系电话
				phone: '请填写联系电话'

			}
		},
		onLoad(option) {
			//获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					this.top = res.statusBarHeight - uni.upx2px(30)
					this.titleBarHeight = res.statusBarHeight + 22
					this.spaceHeight = res.statusBarHeight + 38
					this.shoptypeHeight = res.windowHeight - uni.upx2px(590)
				},
			})
			//获取order_id,调用获取订单接口
			this.order_id = option.order_id
			new Request('orderinfo/Get_Order_Info/GetOrderDetail').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid,
						order_id: option.order_id,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project
					}
				},
				(res) => {
					console.log(res)
					this.orderitemList = res.data.goods_detail
					this.shopname = res.data.shop_info.shop_name
					this.shopaddress = res.data.shop_info.address
					this.shopphone = res.data.shop_info.mobile
					this.total_price = res.data.order_total_money
					this.box_cost = res.data.box_cost
					this.send_cost = res.data.send_cost
					this.discount_money = res.data.discount_money
				}
			)
			//获取用户填写地址
			new Request('orderinfo/orderaddress/Order_Addr/GetCustomerOrderAddr').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project
					}
				},
				(res) => {
					console.log(res)
					if (res.data.code == '0') {
						console.log('用户没有填写过地址')
					} else if (res.data.code == '1') {

					}
				}
			)
		},
		methods: {
			callPhone: function(){
				uni.makePhoneCall({
					phoneNumber: '18718233738' //仅为示例
				});
			},
			toPay: function() {
				//用户选中了外卖到家，判断用户是否填写了地址信息
				if (this.homestate == 'true') {
					//判断是否填写了详细地址
					if (!this.addresStatus) {
						new Request().showToast('地址信息不完整', 'none', () => {
							setTimeout(() => {
								//重新调用 用户编辑收货信息
								this.chooseAdd();
							}, 2001);
						});
						return;
					}
				}
				new Request('topay/Pay_Order/PayOrder').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							order_id: this.order_id,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project,
						}
					},
					(res) => {
						//判断
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								position: 'center'
							});
							return;
						}
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp.toString(),
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.sign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.reLaunch({
									url: '/pages/mine/finish/finish'
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									position: 'center',
									title: '已取消支付',
									icon: 'none'
								})
							}
						});
					}
				)
			},
			//显示选择时间窗口
			showMask() {
				this.isShow = true;
			},
			//用户选择时间,隐藏窗口
			handelClose(data) {
				this.isShow = false;
				this.arriveTime = data._dateRange;
				//data={
				//  date: "2020/3/30 09:00"
				//  _date: "2020-3-30 09:00"
				//  dateRange: "2020/3/30 09:00-09:30"
				//  _dateRange: "2020-3-30 09:00-09:30"
				//  timeStamp: 1585530000000
				// }
			},
			//是否团购代拿
			Tuangou:function() {
				if (this.tuangou == '0') {
					this.tuangou = '1'
				} else {
					this.tuangou = '0'
				}
			},

			//用户编辑收货信息
			chooseAdd: function() {
				uni.chooseAddress({
					success: (res) => {
						console.log(res)
						this.username = res.userName
						this.useraddress = res.cityName + res.countyName + res.detailInfo
						this.phone = res.telNumber;
						//判断状态码 判断用户是否填写了地址信息
						this.addresStatus = res.userName ? 1 : 0;
						//调用修改地址接口,将用户输入信息传入后台
						new Request('orderinfo/orderaddress/Order_Addr/UpdateOrderAddr').request(
							() => {
								return 'POST'
							},
							() => {
								return {
									order_id: this.order_id,
									openid: app.globalData.openid,
									userName: res.userName,
									telNumber: res.telNumber,
									detailInfo: this.useraddress,
									provinceName: res.provinceName,
									cityName: res.cityName,
									countyName: res.countyName,
									address: res.detailInfo,
								}
							},
							(res) => {
								if (res.data.code == 1) {
									new Request().showToast(res.data.msg);
								} else {
									new Request().showToast(res.data.msg);
								}
							}
						)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//用户编辑备注
			completeInput: function(e) {
				//如果订单没有备注输入则返回
				if (e.detail.value == '' || e.detail.value == null) {
					this.remarks = 'false';
				} else {
					this.remarks = e.detail.value;
				}
				new Request('orderinfo/orderremarks/Update_Order_Remarks/UpdateOrderRemarks').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							remarks: this.remarks,
							order_id: this.order_id,
							openid: app.globalData.openid,
						}
					},
					(res) => {
						if (res.data.code == '0') {
							new Request().showToast('订单备注失败');
						} else if (res.data.code == '1') {
							new Request().showToast('订单备注成功');
						}
					}
				)
			},
			//切换预选、外卖选中样式
			changeTake: function() {
				if (this.selfstate == 'true') {
					//显示外卖到家
					this.selfstate = 'false'
					this.homestate = 'true';
				} else {
					//显示预定自提
					this.selfstate = 'true'
					this.homestate = 'false'
				}
				new Request('orderinfo/ordertype/Update_Order_Type/UpdateOrderType').request(
					() => {
						return 'GET'
					},
					() => {
						return {
							order_type: this.homestate == 'true' ? 3 : 2,
							order_id: this.order_id,
							openid: app.globalData.openid
						}
					},
					(res) => {
						if (res.data.code == 0) {
							new Request().showToast(res.data.msg);
						}
					}
				)
			},
			//切换优惠券选中状态
			changeCouponuse: function() {
				if (this.couponuse == '0') {
					this.couponuse = '1'
				} else {
					this.couponuse = '0'
				}
			},
			//返回
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.content {
		padding-bottom: 200upx;
	}

	/*
		顶部导航样式
	*/
	.content_1 {
		width: 750upx;
		background-image: linear-gradient(#E03507, #D92200); //颜色渐变效果(上下)
		text-align: center;
		padding-top: 48upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		z-index: 9999;
	}

	.title_1 {
		height: 45upx;
		color: #FFFFFF;
		font-size: 32upx;
		position: absolute;
		left: 25upx;
		top: 50upx;
		display: flex;
		align-items: center;
	}

	.title_1_icon {
		width: 20upx;
		height: 35upx;
		margin-right: 25upx;
	}

	.title_1_text {
		height: 45upx;
		font-size: 32upx;
		line-height: 45upx;
		color: #FFFFFF;
	}

	/*
		顶部梯形样式
	*/
	.content_2 {
		height: 110upx;
		background-image: linear-gradient(#D92200, #C61500); //颜色渐变效果(上下)
		padding-top: 20upx;
		z-index: 998;
	}

	.choose_box {
		height: 1000upx;
		margin: 0 25upx;
	}


	/*
		预定自提选中样式
	*/
	.self_left {
		width: 325upx;
		height: 25upx;
		padding: 0upx 0upx 35upx;
		position: absolute;
		color: #DD2800;
		z-index: 1;
	}

	.self_left::before {
		content: "";
		position: absolute;
		top: -73upx;
		left: 0;
		right: 0;
		bottom: 67upx;
		background: #ffffff;
		border-top-left-radius: 20upx;
		border-top-right-radius: 15upx;
		transform: perspective(50upx) rotateX(367deg);
		transform-origin: top left;
	}

	.self_left_text {
		height: 40upx;
		width: 112upx;
		position: absolute;
		top: -50upx;
		left: 95upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #DD2800;
		font-weight: bold;
	}

	.self_right_text {
		height: 40upx;
		width: 112upx;
		position: absolute;
		top: -45upx;
		right: 95upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #595959;
		font-weight: bold;
	}

	.self_right {
		width: 685upx;
		height: 35upx;
		padding: 0upx 0upx 35upx 0upx;
		position: absolute;
		color: #DD2800;
		z-index: 2;
	}

	.self_right::before {
		content: "";
		position: absolute;
		top: -55upx;
		left: 339upx;
		right: 0upx;
		bottom: 60upx;
		background: #FFECED;
		border-bottom-left-radius: 20upx;
		border-top-right-radius: 15upx;
		transform: perspective(50upx) rotateX(355deg);
		transform-origin: top right;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1) inset;
	}

	/*
		外卖到家选中样式
	*/
	.home_left {
		width: 387upx;
		height: 25upx;
		padding: 0upx 0upx 35upx;
		position: absolute;
		color: #DD2800;
		z-index: 2;
	}

	.home_left::before {
		content: "";
		position: absolute;
		top: -55upx;
		left: 20upx;
		right: 0upx;
		bottom: 51upx;
		background: #FFECED;
		border-top-left-radius: 20upx;
		border-bottom-right-radius: 15upx;
		transform: perspective(50upx) rotateX(355deg);
		transform-origin: top left;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1) inset;
	}

	.home_left_text {
		width: 112upx;
		height: 40upx;
		position: absolute;
		top: -45upx;
		left: 95upx;
		line-height: 40upx;
		font-size: 28upx;
		font-weight: bold;
		color: #595959;
	}

	.home_right_text {
		width: 112upx;
		height: 40upx;
		position: absolute;
		top: -50upx;
		right: 122upx;
		line-height: 40upx;
		font-size: 28upx;
		font-weight: bold;
		color: #DD2800;
	}

	.home_right {
		width: 703upx;
		height: 20upx;
		padding: 0upx 0upx 35upx 0upx;
		position: absolute;
		color: #DD2800;
		z-index: 1;
	}

	.home_right::before {
		content: "";
		position: absolute;
		top: -73upx;
		left: 400upx;
		right: 0upx;
		bottom: 62upx;
		background: #ffffff;
		border-top-left-radius: 20upx;
		border-top-right-radius: 15upx;
		transform: perspective(50upx) rotateX(367deg);
		transform-origin: top right;
	}


	/*
		选中时样式
	*/
	.choose_self_detail {
		height: 40upx;
		background-color: #ffffff;
		margin-top: 70upx;
		border-radius: 0upx 30upx 0upx 0upx;
	}

	.choose_home_detail {
		height: 40upx;
		background-color: #ffffff;
		margin-top: 70upx;
		border-radius: 30upx 0upx 0upx 0upx;
	}


	/*
		选中内容详细样式
	*/
	.content_3 {
		height: auto;
		background-color: #FFFFFF;
		border-radius: 0upx 0upx 30upx 30upx;
		box-shadow: 0upx 3upx 5upx rgba(0, 0, 0, 0.1);
		margin: 0 25upx;
		z-index: 99;
		padding-bottom: 25upx;
	}


	/*
		预约自提选中内容
	*/
	.self_detail_view {
		height: 210upx;
		margin: 0 25upx;
		display: flex;
		flex-direction: column;
	}

	.shop {
		height: 50upx;
		margin: 2upx 0upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shopname {
		height: 50upx;
		line-height: 50upx;
		font-size: 36upx;
		color: #2D2D2D;
	}

	.call {
		height: 40upx;
		width: 40upx;
	}

	.shopaddress {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #595959;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap; 
	}

	.takertime {
		height: 35upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 26upx;
	}

	.time {
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #848587;
	}

	.choosetime {
		height: 36upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.timestate {
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #D1121A;
		margin-right: 25upx;
	}

	.timeicon {
		height: 25upx;
		width: 15upx;
	}

	.takerphone {
		height: 35upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20upx;
	}

	.phone {
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #848587;
	}

	.choosephone {
		height: 36upx;
		width: 215upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.phonestate {
		width: 185upx;
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #D1121A;
		margin-right: 20upx;
	}

	.phoneicon {
		width: 25upx;
		height: 25upx;
	}

	/*
		外卖到家选中内容详细
	*/
	.home_detail_view {
		height: 172upx;
		margin: 0 25upx;
	}

	.useraddress {
		height: 50upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.address {
		height: 50upx;
		margin: 2upx 0upx;
		line-height: 50upx;
		font-size: 36upx;
		color: #2D2D2D;
	}

	.chooseicon {
		width: 15upx;
		height: 25upx;
	}

	.userinfo {
		height: 40upx;
		display: flex;
		align-items: center;
		margin-bottom: 20upx;
	}

	.username {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #595959;
		margin-right: 40upx;
		font-weight: bold;
	}

	.userphone {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #595959;
		font-weight: bold;
	}

	.line {
		height: 2upx;
		background-color: #F3F3F3;
		margin-bottom: 20upx;
	}

	.arrivetime {
		height: 36upx;
		display: flex;
		justify-content: space-between;
	}

	.arrive {
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #848587;
	}

	/*
		订单详细样式
	*/
	.content_4 {
		height: auto;
		border-radius: 30upx;
		margin: 0 25upx;
		margin-bottom: 35upx;
		margin-top: 30upx;
		box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.1);
		background-color: #FFFFFF;
		padding: 40upx 25upx;
	}

	.ordertitle {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		font-weight: bold;
		color: #2D2D2D;
		margin-bottom: 25upx;
	}

	.orderdetail {
		height: 100upx;
		margin-bottom: 25upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.orderimg {
		height: 100upx;
		width: 100upx;
		border-radius: 12upx;
		background-color: #F9F9F9;
		margin-right: 25upx;
	}

	.detail {
		width: 550upx;
		height: 100upx;
		display: flex;
		flex-direction: column;
	}

	.shopdetail {
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.detailname {
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.counticon {
		height: 32upx;
		width: 32upx;
		background-color: #D1121A;
		border-radius: 5upx;
		line-height: 32upx;
		color: #FFFFFF;
		font-size: 22upx;
		margin-right: 10upx;
		text-align: center;
	}

	.name {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #2D2D2D;
	}

	.shopnum {
		height: 35upx;
		line-height: 35upx;
		font-size: 24upx;
		margin-left: 5upx;
		color: #999999;
	}

	.detailprice {
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 10upx;
	}

	.oldprice {
		height: 40upx;
		line-height: 40upx;
		font-size: 24upx;
		color: #848587;
		text-decoration: line-through; //删除线
		margin-right: 20upx;
	}

	.newprice {
		height: 40upx;
		line-height: 40upx;
		font-size: 24upx;
		color: #2D2D2D;
	}

	.packageview {
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20upx;
	}

	.packname {
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #595959;
	}

	.packageprice {
		height: 40upx;
		line-height: 40upx;
		font-size: 24upx;
		color: #D1121A;
		margin-right: 10upx;
	}

	.sentview {
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25upx;
	}

	.sentname {
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #595959;
	}

	.sentprice {
		height: 40upx;
		line-height: 40upx;
		font-size: 24upx;
		color: #D1121A;
		margin-right: 10upx;
	}

	.couponview {
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.coupontextview {
		height: 40upx;
		display: flex;
		align-items: center;
	}

	.couponicon {
		height: 32upx;
		width: 32upx;
		border-radius: 5upx;
		background-color: #D1121A;
		line-height: 32upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 22upx;
		margin-right: 20upx;
	}

	.coupontext {
		height: 40upx;
		line-height: 40upx;
		font-size: 26upx;
		color: #2D2D2D;
		margin-right: 10upx;
	}

	.couponprice {
		height: 40upx;
		line-height: 40upx;
		font-size: 24upx;
		color: #D1121A;
	}

	.couponbtn {
		height: 32upx;
		width: 32upx;
		margin-right: 15upx;
		border-radius: 32upx;
		background-color: #C3C3C3;
	}

	.couponbtn_active {
		height: 32upx;
		width: 32upx;
		margin-right: 15upx;
		border-radius: 32upx;
		background-color: #D1121A;
	}

	/*
		备注样式
	*/
	.content_5 {
		padding: 35upx 30upx;
		margin: 0 25upx;
		margin-bottom: 35upx;
		border-radius: 30upx;
		box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.1);
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.tips_view {
		height: 65upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0upx;
	}

	.tip {
		height: 40upx;
		font-size: 26upx;
		line-height: 35upx;
		color: #2D2D2D;
	}
	
	.tip_icon{
		height: 35upx;
		width: 35upx;
		border-radius: 35upx;
	}
	
	.tipinput_view {
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tipinput {
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #848587;
	}

	.tipinput_area {
		width: 280upx;
		height: 36upx;
		line-height: 36upx;
		font-size: 26upx;
		color: #848587;
		margin-right: 15upx;
	}

	.tipicon {
		width: 14upx;
		height: 24upx;
	}

	.showmoreicon {
		width: 24upx;
		height: 12upx;
		background-color: #9D9D9D;
		margin: 0 auto;
		margin-top: 35upx;
	}

	/*
		底部去支付样式
   */
	.content_6 {
		width: 100%;
		height: 100upx;
		position: fixed;
		z-index: 99999;
		bottom: 0upx;
		left: 0upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.totalprice_view {
		height: 56upx;
		display: flex;
		align-items: baseline;
		margin-left: 25upx;
	}

	.paytext {
		height: 44upx;
		line-height: 44upx;
		font-size: 32upx;
		color: #2D2D2D;
		margin-right: 5upx;
	}

	.totalprice {
		height: 56upx;
		line-height: 56upx;
		font-size: 40upx;
		color: #D1121A;
		margin-right: 15upx;
	}

	.countprice {
		height: 34upx;
		line-height: 34upx;
		font-size: 24upx;
		color: #D1121A;
	}

	.topaybtn {
		width: 200upx;
		height: 100upx;
		position: absolute;
		right: 0upx;
		top: 0upx;
		background-image: linear-gradient(to right, #FF4519, #E01B05); //颜色渐变效果(从左到右)
		color: #FFFFFF;
		font-size: 32upx;
		text-align: center;
		line-height: 100upx;
	}

	/*
		时间选择样式
	*/
	.content_7 {
		height: 200upx;
		background-color: #007AFF;
	}
</style>
